<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="static/js/vue.js"></script>
    <script src="static/js/jquery-2.2.4.js"></script>
    <style>
        .active{
            font-size: 100px;
        }
        .notActive{
            font-size: 10px;
        }
    </style>
</head>
<body>

    <!--1.一个容器-->
    <div id="app">
        <a href="http://www.baidu.com">点我一下</a>

        <!--v-bind:src="vue中的一个变量的值" 给标签绑定一个动态属性值 -->
        <img v-bind:src="src">
        <!--简写方式：给标签绑定一个动态属性值 -->
        <img  :src="src">
        <p :class="active">我是p标签</p>
        <table class="table  table-striped table-bordered">
            <tr>
                <th>
                    商品编号
                </th>
                <th>
                    名称
                </th>
                <th>
                    数量
                </th>
                <th>
                    单价
                </th>
                <th>
                    小计（自己写）
                </th>
                <th>
                    删除
                </th>
            </tr>
            <tbody>
            <tr v-for="(book,i) in books" :id="book.id">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>
                    <!--
                     @click  绑定一个事件  可以直接访问vue中的数据
                     onclick
                     :disabled="book.num<=1"   明天讲  先理解
                    -->
                    <button class="btn" :disabled="book.num<=1"    @click="decreaseFun(i)">-</button>
                    {{book.num}}
                    <button class="btn" @click="increaseFun(i)">+</button>
                </td>
                <td>{{book.price}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button class="btn-danger" @click="del(i)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>


    </div>


    <script type="text/javascript">

       // var username = $("#username").val();
        //2.创建vue的实例
        var app = new Vue({
            el:"#app",//vue实现的挂载点  dom的id
            //vue中的数据定义
            //1） 用户录入  2） 服务端返回的  3）静态数据
            data:{
                src:"static/006HfagUgy1fwotzpztioj30rs0rsjuk.jpg",
                active:"active",
                //练习： 迭代如下数据，渲染到table标签中，并且把json对象中id的值赋值给
                //每一行（tr）的id属性

                books:[{id:1,name:"java入门到放弃",num:1,price:100},{id:2,name:"java入门到放弃1",
                    num:1,price:101},
                    {id:3,name:"java入门到放弃2",num:1,price:102}]

            }

        });


    </script>

</body>
</html>